<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="shortcut icon" href="/img/favicon.png">
		<link rel="stylesheet" href="/libs/swiper/css/swiper.min.css">
		<link rel="stylesheet" href="/css/modules/header.css">
		<link rel="stylesheet" href="/css/modules/footer.css">
		<link rel="stylesheet" href="/css/index.css"/>
	</head>
	<body>
		<!-- 首页网页头部图片开始 -->
		<header></header>
		<!-- 首页网页头部结束 -->
		<!-- 轮播图部分图片及导航 开始-->
		<div class="banner">
			<div class="banner-img">
				<!-- 轮播图图片 -->
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide"><img src="/img/banner.jpg" alt=""></div>
						<div class="swiper-slide"><img src="/img/banner2.jpg" alt=""></div>
						<div class="swiper-slide"><img src="/img/banner3.jpg" alt=""></div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
					
					<!-- 如果需要导航按钮 -->
					<div class="swiper-button-prev"></div>
					<div class="swiper-button-next"></div>
					
				</div>
				<!-- banner中的导航条 -->
				<div class="banner-img-nav">
					<ul id="bannerTitle">
						<!-- <li><a href="/html/list.html">基础系列<i>></i></a></li> -->
					</ul>
					<script type="text/html" id="bannerTitleTemplate">
						{{each list item}}
							<li><a href="/html/list.html?id={{item.id}}">{{item.name}}<i>></i></a></li>
						{{/each}}
					</script>
				</div>
			</div>
		</div>
		<!--banner 轮播图部分图片及导航 结束 -->

		<!-- 页面主体内容 开始 -->
		<main>
			<div class="main-nav">
				<div class="main-nav-information">
					<ul>
						<span class="span-1"></span>
						<li><a href="#">品牌故事</a></li>
						<span class="span-2"></span>
						<li><a href="#">海鸥新闻</a></li>
						<span class="span-3"></span>
						<li><a href="#">企业采购</a></li>
						<span class="span-4"></span>
						<li><a href="#">客户服务</a></li>
						<span class="span-5"></span>
						<span class="span-6"></span>
					</ul>
				</div>	
				<div class="main-nav-img">
					<ul>
						<li><a href="/html/details.html"><img src="/img/list1.jpg" alt=""></a></li>
						<li><a href="/html/details.html"><img src="/img/list1.jpg" alt=""></a></li>
						<li><a href="/html/details.html"><img src="/img/list1.jpg" alt=""></a></li>
					</ul>
				</div>
			</div>
			<!-- 热销单品 -->
			<div class="main-goods">
				<div class="main-goods-text">
					<h2>热销单品</h2>
					<div class="main-goods-btn">
						<a class="main-goods-btn-1 "><img src="/img/xyu-.png" alt=""></a>
						<a><img src="/img/day.png" alt=""></a>
					</div>
				</div>
				<div class="main-goods-hot">
					 <ul class="slider" id="hotList">
						<!-- <li>
							<a href="/html/details.html"><img src="/img/list2.jpg" alt=""></a>
							<h3><a href="/html/details.html">海鸥基础系列自动机械情侣对表219.31.1014/L</a></h3>
							<p class="main-goods-hot-desc">已设置最大优惠，无需领劵</p>
							<p class="main-goods-hot-price">2050.00元</p>
						</li> -->
						
					</ul> 
					<script type="text/html" id="hotListTemplate">
						{{each list item}}
						<li>
							<a href="/html/details.html?id={{item.id}}"><img src="{{item.src}}" alt=""></a>
							<h3><a href="/html/details.html?id={{item.id}}">{{item.title}}</a></h3>
							<p class="main-goods-hot-desc">{{item.desc}}</p>
							<p class="main-goods-hot-price">{{item.nowPrice}}元</p>
						</li>	
						{{/each}}
					</script>
				</div>	 
			</div>

			<!-- 基础系列 -->
			<div class="main-page">
				<div class="main-contain">
					<div class="main-contain-text">
						<h2>基础系列</h2>
						<div class="main-contain-btn">
							<a href="/html/list.html">查看全部</a>
							<i>></i>
						</div>
					</div>
					<div class="main-contain-goods">
						<div class="main-contain-left">
							<ul>
								<li><a class="a" href="/html/details.html"><img src="/img/list3.jpg" alt=""></a></li>
							</ul>
						</div>
						<div class="main-contain-right">
							<ul id="basicsgoodsList">
								<!-- <li>
									<a class="a" href="/html/details.html"><img src="/img/list4.jpg" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html">海鸥65周年海洋之星深度防水自动机械潜水表816.52.1206</a></h3>
									<p class="p-desc">海鸥D304planB航空计时表飞行复古码表1963复刻版机械男表</p>
									<p class="p"><span class="p-price">2799.00</span>元</p>
								</li> -->
							</ul>
							<script type="text/html" id="basicsListTemplate">
								{{each list item}}
								<li>
									<a class="a" href="/html/details.html?id={{item.id}}"><img src="{{item.src}}" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html?id={{item.id}}">{{item.title}}</a></h3>
									<p class="p-desc">{{item.desc}}</p>
									<p class="p"><span class="p-price">{{item.nowPrice}}</span>元</p>
								</li>
								{{/each}}
							</script>
						</div>
					</div>
				</div>
				<!-- 多功能腕表 -->
				<div class="main-contain">
					<div class="main-contain-text">
						<h2>多功能腕表</h2>
						<div class="main-contain-btn">
							<a href="/html/list.html">查看全部</a>
							<i>></i>
						</div>
					</div>
					<div class="main-contain-goods">
						<div class="main-contain-left">
							<ul>
								<li><a class="a" href="/html/details.html"><img src="/img/list3.jpg" alt=""></a></li>
							</ul>
						</div>
						<div class="main-contain-right">
							<ul id="functionList">
								<!-- <li>
									<a class="a" href="/html/details.html"><img src="/img/list4.jpg" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html">海鸥65周年海洋之星深度防水自动机械潜水表816.52.1206</a></h3>
									<p class="p-desc">海鸥D304planB航空计时表飞行复古码表1963复刻版机械男表</p>
									<p class="p"><span class="p-price">2799.00</span>元</p>
								</li> -->
							</ul>
							<script type="text/html" id="functionListTemplate">
								{{each list item}}
								<li>
									<a class="a" href="/html/details.html?id={{item.id}}"><img src="{{item.src}}" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html?id={{item.id}}">{{item.title}}</a></h3>
									<p class="p-desc">{{item.desc}}</p>
									<p class="p"><span class="p-price">{{item.nowPrice}}</span>元</p>
								</li>
								{{/each}}
							</script>
						</div>
					</div>
				</div>
				<!-- 女士/情侣系列 -->
				<div class="main-contain">
					<div class="main-contain-text">
						<h2>女士/情侣系列</h2>
						<div class="main-contain-btn">
							<a href="/html/list.html">查看全部</a>
							<i>></i>
						</div>
					</div>
					<div class="main-contain-goods">
						<div class="main-contain-left">
							<ul>
								<li><a class="a" href="/html/details.html"><img src="/img/list3.jpg" alt=""></a></li>
							</ul>
						</div>
						<div class="main-contain-right">
							<ul id="femaleList">
								<!-- <li>
									<a class="a" href="/html/details.html"><img src="/img/list4.jpg" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html">海鸥65周年海洋之星深度防水自动机械潜水表816.52.1206</a></h3>
									<p class="p-desc">海鸥D304planB航空计时表飞行复古码表1963复刻版机械男表</p>
									<p class="p"><span class="p-price">2799.00</span>元</p>
								</li> -->
							</ul>
							<script type="text/html" id="femaleListTemplate">
								{{each list item}}
								<li>
									<a class="a" href="/html/details.html?id={{item.id}}"><img src="{{item.src}}" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html?id={{item.id}}">{{item.title}}</a></h3>
									<p class="p-desc">{{item.desc}}</p>
									<p class="p"><span class="p-price">{{item.nowPrice}}</span>元</p>
								</li>
								{{/each}}
							</script>
						</div>
					</div>
				</div>
				<!-- 经典•陀飞轮 -->
				<div class="main-contain">
					<div class="main-contain-text">
						<h2>经典•陀飞轮</h2>
						<div class="main-contain-btn">
							<a href="/html/list.html">查看全部</a>
							<i>></i>
						</div>
					</div>
					<div class="main-contain-goods">
						<div class="main-contain-left">
							<ul>
								<li><a class="a" href="/html/details.html"><img src="/img/list3.jpg" alt=""></a></li>
							</ul>
						</div>
						<div class="main-contain-right">
							<ul id="classicList">
								<!-- <li>
									<a class="a" href="/html/details.html"><img src="/img/list4.jpg" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html">海鸥65周年海洋之星深度防水自动机械潜水表816.52.1206</a></h3>
									<p class="p-desc">海鸥D304planB航空计时表飞行复古码表1963复刻版机械男表</p>
									<p class="p"><span class="p-price">2799.00</span>元</p>
								</li> -->
							</ul>
							<script type="text/html" id="classicListTemplate">
								{{each list item}}
								<li>
									<a class="a" href="/html/details.html?id={{item.id}}"><img src="{{item.src}}" alt=""></a>
									<h3 class="p-title"><a href="/html/details.html?id={{item.id}}">{{item.title}}</a></h3>
									<p class="p-desc">{{item.desc}}</p>
									<p class="p"><span class="p-price">{{item.nowPrice}}</span>元</p>
								</li>
								{{/each}}
							</script>
						</div>
					</div>
				</div>
		    </div>
		</main>
		<footer></footer>
		<script src="/libs/require/require.min.js" data-main="/js/index"></script>
	</body>
</html>
